<template>
  <div class="home">
    <router-view/>
    <van-tabbar v-model="active" @change="changeTab(active)">
      <van-tabbar-item icon="home">标签1</van-tabbar-item>
      <van-tabbar-item icon="search">标签2</van-tabbar-item>
      <van-tabbar-item icon="star-o">标签3</van-tabbar-item>
      <van-tabbar-item icon="setting">标签4</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  props: {
    msg: String
  },
  data () {
    return {
      active: 0
    }
  },
  created () {
   let routePath = this.$route.path
   if (routePath === '' || routePath === '/home') {
     this.active = 0
   } else if (routePath === '/two') {
     this.active = 1
   } else if (routePath === '/three') {
     this.active = 2
   } else if (routePath === '/four') {
     this.active = 3
   }
  },
  methods:{
    changeTab (active) {
      let activeNum = Number(active)
      if (activeNum === 0) {
        this.$router.push('/home')
      } else if (activeNum === 1) {
        this.$router.push('/two')
      } else if (activeNum === 2) {
        this.$router.push('/three')
      } else if (activeNum === 3) {
        this.$router.push('/four')
      }
    }
  }
}
</script>
